<template>
	<text :style="{ backgroundColor: bgc }" class="roc-btn">{{ text }}</text>
</template>

<script>
export default {
	name: 'roc-btn',
	props: {
		text: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: 'default'
		}
	},
	computed: {
		bgc() {
			if (this.type == 'primary') {
				return '#3c9cff';
			} else if (this.type == 'success') {
				return '#5ac725';
			} else if (this.type == 'warning') {
				return '#f9ae3d';
			} else if (this.type == 'error') {
				return '#f56c6c';
			} else {
				return '#fff';
			}
		}
	}
};
</script>

<style lang="scss">
.roc-btn {
	cursor: pointer;
	display: inline-block;
	padding: 10rpx 20rpx;
	color: #fff;
	font-size: 28rpx;
	border-radius: 6rpx;
	transition: all 0.3s;
	margin: 0 10rpx;
}
</style>
